    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>菜单管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="icon" href="favicon.ico">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/public.css" media="all" />
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui_ext/dtree/dtree.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui_ext/dtree/font/dtreefont.css">

        <style type="text/css">
        .select-test{position: absolute;max-height: 500px;height: 350px;overflow: auto;width: 100%;z-index: 123;display: none;border:1px solid silver;top: 42px;}
        .layui-show{display: block!important;}
        </style>
        </head>
        <body class="childrenBody">
        <!-- 搜索条件开始 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查询条件</legend>
        </fieldset>
        <form class="layui-form" method="post" id="searchFrm">
        <div class="layui-form-item">
        <div class="layui-inline">
        <label class="layui-form-label">菜单名称:</label>
        <div class="layui-input-inline">
        <input type="text" name="title"  autocomplete="off" class="layui-input">
        </div>
        </div>
        <div class="layui-inline">
        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        <button type="reset" class="layui-btn layui-btn-warm  layui-icon layui-icon-refresh">重置</button>
        </div>
        </div>
        </form>

        <!-- 搜索条件结束 -->


        <!-- 数据表格开始 -->
        <table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
        <div style="display: none;" id="menuToolBar">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
        </div>
        <div  id="menuBar" style="display: none;">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
        <!-- 数据表格结束 -->

        <!-- 添加和修改的弹出层开始 -->
        <div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
        <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
        <label class="layui-form-label">父级菜单：</label>
        <div class="layui-input-block">
        <div class="layui-unselect layui-form-select" id="pid_div">
        <div class="layui-select-title">
        <input type="hidden" name="pid"  id="pid">
        <input type="text" name="pid_str" id="pid_str" placeholder="请选择" readonly="" class="layui-input layui-unselect">
        <i class="layui-edge"></i>
        </div>
        </div>
        <div class="layui-card select-test" id="menuSelectDiv">
        <div class="layui-card-body">
        <div id="toolbarDiv"><ul id="menuTree" class="dtree" data-id="0" style="width: 100%;"></ul></div>
        </div>
        </div>
        </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">菜单名称:</label>
        <div class="layui-input-block">
        <input type="hidden" name="id">
        <input type="text" name="title"  placeholder="请输入菜单名称" autocomplete="off"
        class="layui-input">
        </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">菜单地址:</label>
        <div class="layui-input-block">
        <input type="text" name="href" placeholder="请输入菜单地址" autocomplete="off"
        class="layui-input">
        </div>
        </div>
        <div class="layui-form-item">
        <div class="layui-inline">
        <label class="layui-form-label">菜单图标:</label>
        <div class="layui-input-inline">
        <input type="text" name="icon"   placeholder="请输入菜单图标" lay-verify="required" autocomplete="off"
        class="layui-input">
        </div>
        </div>
        <div class="layui-inline">
        <label class="layui-form-label">TARGET:</label>
        <div class="layui-input-inline">
        <input type="text" name="target"  placeholder="请输入TRAGET"  autocomplete="off"
        class="layui-input">
        </div>
        </div>
        </div>
        <div class="layui-form-item">
        <div class="layui-inline">
        <label class="layui-form-label">是否展开:</label>
        <div class="layui-input-inline">
        <input type="radio" name="spread" value="1" title="展开">
        <input type="radio" name="spread" value="0" title="不展开"  checked="checked">
        </div>
        </div>
        <div class="layui-inline">
        <label class="layui-form-label">是否可用:</label>
        <div class="layui-input-inline">
        <input type="radio" name="available" value="1" checked="checked" title="可用">
        <input type="radio" name="available" value="0" title="不可">
        </div>
        </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
        <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
        </div>
        </div>
        </form>

        </div>
        <!-- 添加和修改的弹出层结束 -->

        <script src="${pageContext.request.contextPath }/resources/layui/layui.js"></script>
        <script type="text/javascript">
                var tableIns;
                layui.extend({
                        dtree: '${pageContext.request.contextPath}/resources/layui_ext/dist/dtree'
                }).use(['jquery','layer','form','dtree','table'],function() {
                        var $ = layui.jquery;
                        var layer = layui.layer;
                        var form = layui.form;
                        var dtree = layui.dtree;
                        var table = layui.table;
                        //渲染表格
                        tableIns = table.render({
                                elem: '#menuTable' , //渲染的目标对象
                                url: '${pageContext.request.contextPath}/menu/loadAllMenu.action', //数据接口地址
                                title:'菜单列表数据', //标题
                                height: 'full-150',
                                cellMinWidth : 100 , //设置列最小默认宽度
                                toolbar: '#menuToolBar' , //表格的头部工具栏
                                page: true , //启动分页
                                cols: [[
                                        {type:'checkbox',fixed: 'left'},
                                        {field:'id',title:'ID',align:'center',width:'80'},
                                        {field:'pid',title:'父节点ID',align:'center',width:'100'},
                                        {field:'title',title:'菜单名称',align:'center',width:'120'},
                                        {field:'href',title:'菜单地址',align:'center',width:'220'},
                                        {field:'spread',title:'是否展开',align:'center',width:'100',templet:function(d) {
                                                        return d.spread == '1'?'<font color="blue">展开</font>':'<font color="red">不展开</font>'
                                                }},
                                        {field:'target',title:'TARGET',align:'center',width:'100'},
                                        {field:'icon',title:'菜单图标',align:'center',width:'100',templet:function(d) {
                                                        return "<div class='layui-icon'>"+d.icon+"</div>"
                                                }},
                                        {field:'available',title:'是否可用',align:'center',width:'100',templet:function(d) {
                                                        return d.available=='1'?'<font color=blue>可用</font>':'<font color=red>不可用</font>'
                                                }},
                                        {fixed:'right',title:'操作',toolbar:'#menuBar',align:'center',width:'180'}
                                ]]
                        });

                        //模糊查询
                        $("#doSearch").click(function () {
                                //获取搜索框中的参数
                                var param =  $("#searchFrm").serialize();
                                tableIns.reload({
                                        url: "${pageContext.request.contextPath}/menu/loadAllMenu.action?"+param,
                                        page: {curr: 1}
                                })
                        })

                        //监听头部工具栏
                        table.on("toolbar(menuTable)",function(obj) {
                                switch (obj.event) {
                                        case 'add':
                                                openAddMenu();
                                                break;
                                }
                        })

                        var url;
                        var mainIndex ;
                        //打开添加页面
                        function openAddMenu(){
                                mainIndex = layer.open({
                                        type:1,
                                        title:"添加菜单",
                                        content:$("#saveOrUpdateDiv"),
                                        area: ['800px','450px'],
                                        success: function(index) {
                                                //清空表单数据
                                                $("#dataFrm")[0].reset();
                                                $("menuSelectDiv").removeClass("layui-show");
                                                url = "${pageContext.request.contextPath}/menu/addMenu.action"

                                        }
                                })
                        }

                        //保存
                        form.on("submit(doSubmit)",function(obj) {
                                //序列化表单数据
                                var param = $("#dataFrm").serialize();
                                $.get(url,param,function(obj) {
                                        layer.msg(obj.msg);
                                        //关闭弹出层
                                        layer.close(mainIndex);
                                        //刷新数据表格
                                        tableIns.reload();
                                        //刷新左侧得树
                                        window.parent.left.menuTree.reload();
                                        //刷新添加和修改的下拉树
                                        menuTree.reload();
                                })
                        })

                        //初始化添加和修改页面的下拉树
                        var menuTree = dtree.render({
                                elem: "#menuTree",
                                dataStyle: "layuiStyle", //使用layui风格展示数据
                                response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
                                dataFormat: "list", //配置data的风格为list
                                url: "${pageContext.request.contextPath}/menu/loadMenuManagerLeftTreeJson.action?spread=1",
                                icon:"2",
                                accordion:true
                        })

                        //点击下拉可以加载树
                        $("#pid_div").on("click",function() {
                                $(this).toggleClass("layui-form-selected");
                                $("#menuSelectDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
                        })

                        dtree.on("node(menuTree)",function(obj) {
                                $("#pid_str").val(obj.param.context);
                                $("#pid").val(obj.param.nodeId);
                                $("#pid_div").toggleClass("layui-form-selected");
                                $("#menuSelectDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
                        })

                        //监听行工具栏
                        table.on("tool(menuTable)",function(obj) {
                                //获取当前行数据
                                var data = obj.data;
                                var layEvent = obj.event;
                                if(layEvent == 'del'){
                                        //先判断当前菜单是否有子节点
                                        $.get("${pageContext.request.contextPath}/menu/checkMenuHasChildren.action?id="+data.id,function (obj){
                                                if(obj.code >= 0){
                                                        layer.msg("当前菜单有子节点,请先删除完子节点");
                                                }else{
                                                        layer.confirm("确定删除 ["+data.title+"]这个菜单吗?",function (index){
                                                                //发送删除的请求
                                                                $.get("${pageContext.request.contextPath}/menu/deleteMenu.action",{id:data.id},function (res){
                                                                        layer.msg(res.msg);
                                                                        //刷新表格
                                                                        tableIns.reload();
                                                                        //刷新左边的树
                                                                        window.parent.left.menuTree.reload();
                                                                        //刷新添加和修改的下拉树
                                                                        menuTree.reload();
                                                                })
                                                        })
                                                }
                                        })

                                }else if(layEvent == 'edit'){
                                        openUpdateMenu(data);
                                }
                        })

                        function openUpdateMenu(data){
                                mainIndex = layer.open({
                                        type:1,
                                        title:"修改菜单",
                                        content:$("#saveOrUpdateDiv"),
                                        area: ['800px','450px'],
                                        success: function(index) {
                                                form.val("dataFrm",data);//回显
                                                $("menuSelectDiv").removeClass("layui-show");
                                                url = "${pageContext.request.contextPath}/menu/updateMenu.action"
                                                //反选下拉树
                                                var pid = data.pid;
                                                var params = dtree.dataInit("menuTree",pid);
                                                //给下拉框的text赋值
                                                $("#pid_str").val(params.context);
                                        }
                                })
                        }

                })

                function reloadTable(id) {
                        tableIns.reload({
                                url:"${pageContext.request.contextPath}/menu/loadAllMenu.action?id="+id
                        })
                }
        </script>
        </body>
        </html>
